<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="http://localhost:8080/Barbr/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js"></script>
    <style>
        .table-hover > tbody > tr:first-child{
            background-color: grey;
        }
        body{
            background-image: url('img/photo.jpg');
        }
        button,input[type="button"]{
            width: 50px;
            height: 30px;
        }
        .btn{
            padding: 0;
            margin-right: 5px;
        }
    </style>
    <script>
        $(function (){
            let date={
                "id":"",
                "username":"",
                "sex":"",
                "level":"",
                "telephone":""
            };
           $("input[value='删除']").on('click',function (){
               let $tr = $(this).parent().parent();
               if(confirm('确定删除吗？')){
                   $tr.remove();
               }else {
                   return false;
               }
           });
            $("input[value='修改']").click(function (){
                let $btn = $(this).parent();
                $(this).parent().prevAll().children().removeAttr("disabled");
                $(this).attr("disabled","disabled");
                $("<button class='btn btn-primary active'>保存</button>").appendTo($btn);
            });
            $("body").on("click","button",function (){
                let x = $(this).parent().parent().children();
                date.id = x.eq(0).children().val();
                date.username= x.eq(1).children().val();
                date.sex = x.eq(2).children().val();
                date.level = x.eq(3).children().val();
                date.telephone = x.eq(4).children().val();
                console.log(date);
               $.ajax({
                    url:"adminOpt?action=save",
                    data:date,
                    cache:false,
                    type:"get",
                   success(data){
                   },
                   error(){
                        alert("err");
                   }
               });
               $("input[value='修改']").removeAttr("disabled");
                $(this).parent().prevAll().children().attr("disabled","disabled");
               $(this).remove();
            });
        });
    </script>
</head>

<body>
    <div class="container">
        <h2 class="text-center">理发师信息</h2>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>等级</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${sessionScope.hairmaster}" var="item">
                    <tr>
                        <td><input type="text" value="${item.id}" disabled/></td>
                        <td><input type="text" value="${item.username}" disabled/></td>
                        <td><input type="text" value="${item.sex}" disabled/></td>
                        <td><input type="text" value="${item.level}" disabled/></td>
                        <td><input type="text" value="${item.telephone}" disabled/></td>
                        <td><input class="btn btn-primary active" type="button" value="删除"/><input class="btn btn-primary active" type="button" value="修改"/></td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</body>

</html>